<template>
  <div class="movie-item-assistant-components">
    <div class="poster">
      <div class="tag" v-if="info?.version_types">
        {{ info?.version_types }}
      </div>
      <Image class="img" mode="aspectFill" :src="info?.pic" alt="" />
      <div class="beautify">
        <div class="icon">
          <TriangleUp size="0.6rem" color="#15181d"></TriangleUp>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div class="txt">{{ info?.name }}</div>
        <!-- <div class="tag">
          <nut-tag plain>IMAX2D</nut-tag>
        </div> -->
      </div>
      <div class="date" v-if="info?.publish_date">
        <div class="txt">
          {{ formatPublishDate(info?.publish_date) }}
        </div>
      </div>
      <div class="desc" v-if="info?.cast">
        <div class="txt">主演：{{ info?.cast }}</div>
      </div>
      <div class="type" v-if="info?.film_types">
        <div class="name">类型：</div>
        <div class="ui">
          <div
            class="item"
            v-for="(item, index) in formatFilmTypes(info?.film_types)"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="score">
        <div class="ui">
          <nut-price
            :price="info?.like"
            size="small"
            thousands
            :decimal-digits="0"
            symbol="人想看"
            position="after"
          />
        </div>
      </div>
    </div>
    <div class="operate">
      <nut-animate type="breath" :loop="true">
        <nut-button type="info" block size="small" @click="onClickBuy">
          预购
        </nut-button>
      </nut-animate>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs, computed } from "vue";
import { TriangleUp } from "@nutui/icons-vue-taro";
import { dateStrChangeTimeTamp, timestampToTimeYMD } from "../../utils/tools";
import Taro from "@tarojs/taro";
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: Object,
});
//使用父组件传递过来的值
const { info } = toRefs(props);

// 点击购票按钮
const onClickBuy = () => {
  const film_id = info?.value?.film_id;
  Taro.navigateTo({
    url: `/pages/movie-detail/index?film_id=${film_id}`,
  });
};
// 【格式化】影片类型
const formatFilmTypes = computed(() => {
  return (str) => {
    return str.split("|") || [];
  };
});
// 【格式化】上映时间
const formatPublishDate = computed(() => {
  return (str) => {
    const timeTamp = dateStrChangeTimeTamp(str);
    return timestampToTimeYMD(timeTamp)
      ? timestampToTimeYMD(timeTamp) + "上映"
      : null;
  };
});
</script>
<style lang="scss">
.movie-item-assistant-components {
  display: flex;
  flex-direction: row;
  height: 8rem;
  background: linear-gradient(to right, #ffffff, #fbf3ef);
  border-radius: 0.5rem;
  border: 0.2rem solid #ffffff;
  .poster {
    margin: 0.5rem;
    width: 5rem;
    border-radius: 0.2rem;
    overflow: hidden;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
    }
    .tag {
      position: absolute;
      top: 0.2rem;
      left: 0.2rem;
      font-size: 0.5rem;
      line-height: 0.8rem;
      background: #07070794;
      padding: 0 0.2rem;
      color: #f3f3f4;
      border-radius: 0.1rem;
    }
    .beautify {
      position: absolute;
      bottom: 0.2rem;
      right: 0.2rem;
      background: #f3f3f4;
      border-radius: 2rem;
      height: 1rem;
      width: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon {
        display: flex;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        margin-left: 0.1rem;
      }
    }
  }
  .content {
    flex: 1;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    width: 5rem;
    .title {
      font-weight: 500;
      color: #15181d;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 0.8rem;
      line-height: 1rem;
      height: 1.5rem;
      .txt {
        display: -webkit-box;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      margin-bottom: 0.2rem;
    }
    .date,
    .desc,
    .score,
    .type {
      color: #858a99;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 1.2rem;
      font-size: 0.6rem;
      line-height: 0.8rem;
      .txt {
        display: -webkit-box;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .type {
      .ui {
        display: flex;
        flex-direction: row;
        .item {
          margin-right: 0.2rem;
        }
      }
    }
    .score {
      .name {
        // margin-right: 0.3rem;
      }
      .ui {
        .nut-price {
          font-size: 0;
          display: inline;
          color: #ffc800;
        }
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
  .operate {
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .nut-button--primary {
      border: none;
    }
  }
}
</style>
